<template>
    <div class="mui-numbox" data-numbox-min="1" :data-numbox-max="max">
        <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
        <input id="test" @change="handleShop"  class="mui-input-numbox" type="number" ref="input" value="1">
        <button class="mui-btn mui-btn-numbox-plus" type="button" disabled="">+</button>
    </div>
</template>

<script>
    // 引入 mui  js  文件
    import mui from '../../lib/mui/js/mui.min.js'

    export default {
        data() {
            return {}
        },
        created() {

        },
        methods: {
            // 根据 input  处理 商品
            handleShop() {
                // 获取 input 得到的value 再进行 去 首位空格
                var value = parseInt(this.$refs.input.value.trim())
                // 如果 value 的 值 大于 最大值 或者 小于 0 弹出 警告信息
                if (value <= 0 || value > this.max ) return window.alert('请不要随意修改！')
                // console.log(value)
                this.$emit('getCount', value)
            }
        },
        props: ['max'],
        watch: {
            // 监听 max  属性 最后一刻 提交过来的 最大 值
            max() {
                mui('.mui-numbox').numbox().setOption('max',this.max)
            }
        }
    }
</script>

<style scoped lang="less">
</style>